<template>
  <el-card class="box-card">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-table
      v-loading="isLoading"
      :data="rightList"
      stripe
      border
      style="width: 100%"
    >
      <el-table-column type="index"> </el-table-column>
      <el-table-column prop="id" label="权限id"> </el-table-column>
      <el-table-column prop="authName" label="权限名称"> </el-table-column>
      <el-table-column prop="path" label="路径"> </el-table-column>
      <el-table-column label="层级">
        <template slot-scope="scope">
          <el-tag
            type="primary"
            effect="plain"
            size="mini"
            v-if="scope.row.level == 0"
            >{{ scope.row.level | level }}</el-tag
          >
          <el-tag
            type="success"
            effect="plain"
            size="mini"
            v-else-if="scope.row.level == 1"
            >{{ scope.row.level | level }}</el-tag
          >
          <el-tag type="warning" effect="plain" size="mini" v-else>{{
            scope.row.level | level
          }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { getRightList } from "@/api/index";
export default {
  name: "",
  data() {
    return {
      isLoading: false,
      rightList: []
    };
  },
  watch: {},
  props: {},
  components: {},
  computed: {},
  mounted() {},
  methods: {},
  filters: {
    level(lev) {
      if (lev === "0") {
        return "一级";
      } else if (lev === "1") {
        return "二级";
      } else {
        return "三级";
      }
    }
  },
  async created() {
    this.isLoading = true;
    await getRightList({ type: "list" }).then(({ data, meta }) => {
      if (meta.status == 200) {
        this.rightList = data;
        this.isLoading = false;
      }
    });
  }
};
</script>

<style scoped lang="scss">
.el-table {
  line-height: 0;
}
.el-col {
  line-height: 0;
}
</style>
